<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Tables - Ace Admin</title>

<meta name="description" content="Static &amp; Dynamic Tables" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />

<!-- page specific plugin styles -->

<!-- text fonts -->
<link rel="stylesheet" href="css/fonts.googleapis.com.css" />

<!-- ace styles -->
<link rel="stylesheet" href="css/ace.min.css"
	class="ace-main-stylesheet" id="main-ace-style" />

<link rel="stylesheet" href="css/ace-skins.min.css" />
<link rel="stylesheet" href="css/ace-rtl.min.css" />
<script src="js/ace-extra.min.js"></script>



</head>

<body class="no-skin">


	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
				try {
					ace.settings.loadState('main-container')
				} catch (e) {}
			</script>


		<div class="main-content">
			<div class="main-content-inner">


				<div class="page-content">
					<!-- /.ace-settings-container -->

					<div class="row">
						<div class="col-xs-12">
							<div class="table-header"></div>

							<!-- div.table-responsive -->

							<!-- div.dataTables_borderWrap -->
							<div>
								<table id="dynamic-table"
									class="table table-striped table-bordered table-hover">
									<thead>
										<tr>
											<th class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></th>
											<th>编号</th>
											<th>商品编号</th>
											<th>商品名称</th>
											<th>价格</th>

											<th class="hidden-480">数量</th>
											<th>金额</th>

											<th><i
												class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
												结束日期</th>
											<th>库管员</th>
										</tr>
									</thead>

									<tbody>
										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>
											<td>01</td>
											<td>001</td>
											<td><a href="#">大鱼</a></td>
											<td>$45</td>
											<td class="hidden-480">3,330</td>
											<td>Feb 12</td>

											<td class="hidden-480"><span
												class="label label-sm label-warning">Expiring</span></td>
											<td>敏子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>02</td>
											<td>002</td>
											<td><a href="#">小鱼</a></td>
											<td>$35</td>
											<td class="hidden-480">2,595</td>
											<td>Feb 18</td>

											<td class="hidden-480"><span
												class="label label-sm label-success">Registered</span></td>
											<td>敏子</td>
										</tr>


										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>03</td>
											<td>003</td>
											<td><a href="#">螃蟹</a></td>
											<td>$75</td>
											<td class="hidden-480">6,500</td>
											<td>Apr 03</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>敏子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>04</td>
											<td>004</td>
											<td><a href="#">扇贝</a></td>
											<td>$55</td>
											<td class="hidden-480">4,250</td>
											<td>Jan 21</td>

											<td class="hidden-480"><span
												class="label label-sm label-success">Registered</span></td>
											<td>思思</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>05</td>
											<td>005</td>
											<td><a href="#">鳝鱼</a></td>
											<td>$40</td>
											<td class="hidden-480">3,200</td>
											<td>Feb 09</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>梅子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>06</td>
											<td>006</td>
											<td><a href="#">鱿鱼</a></td>
											<td>$95</td>
											<td class="hidden-480">8,520</td>
											<td>Feb 22</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>07</td>
											<td>007</td>
											<td><a href="#">海胆</a></td>
											<td>$45</td>
											<td class="hidden-480">4,100</td>
											<td>Mar 12</td>

											<td class="hidden-480"><span
												class="label label-sm label-success">Registered</span></td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>08</td>
											<td>008</td>
											<td><a href="#">海螺</a></td>
											<td>$38</td>
											<td class="hidden-480">3,940</td>
											<td>Feb 12</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>


											<td>09</td>
											<td>009</td>
											<td><a href="#">鲍鱼</a></td>
											<td>$25</td>
											<td class="hidden-480">2,983</td>
											<td>Apr 01</td>

											<td class="hidden-480"><span
												class="label label-sm label-warning">Expiring</span></td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>10</td>
											<td>010</td>
											<td><a href="#">海蛇</a></td>
											<td>$50</td>
											<td class="hidden-480">6,500</td>
											<td>Feb 02</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>


											<td>11</td>
											<td>011</td>
											<td><a href="#">小虾</a></td>
											<td>$55</td>
											<td class="hidden-480">6,400</td>
											<td>Feb 24</td>

											<td class="hidden-480"><span
												class="label label-sm label-success">Registered</span></td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>12</td>
											<td>012</td>
											<td><a href="#">大闸蟹</a></td>
											<td>$25</td>
											<td class="hidden-480">2,200</td>
											<td>Apr 01</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>13</td>
											<td>013</td>
											<td><a href="#">大龙虾</a></td>
											<td>$42</td>
											<td class="hidden-480">3,900</td>
											<td>Feb 01</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>梅子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>14</td>
											<td>014</td>
											<td><a href="#">小龙虾</a></td>
											<td>$35</td>
											<td class="hidden-480">3,420</td>
											<td>Mar 12</td>

											<td class="hidden-480"><span
												class="label label-sm label-warning">Expiring</span></td>
											<td>华子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>15</td>
											<td>015</td>
											<td><a href="#">海胆</a></td>
											<td>$30</td>
											<td class="hidden-480">3,200</td>
											<td>Feb 11</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>华子</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>16</td>
											<td>016</td>
											<td><a href="#">带鱼</a></td>
											<td>$35</td>
											<td class="hidden-480">3,900</td>
											<td>Mar 26</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>华子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>17</td>
											<td>017</td>
											<td><a href="#">花甲</a></td>
											<td>$48</td>
											<td class="hidden-480">3,990</td>
											<td>Feb 15</td>

											<td class="hidden-480"><span
												class="label label-sm label-warning">Expiring</span></td>
											<td>华子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>18</td>
											<td>018</td>
											<td><a href="#">草鱼</a></td>
											<td>$55</td>
											<td class="hidden-480">5,600</td>
											<td>Jan 29</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>思思</td>

										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>19</td>
											<td>019</td>
											<td><a href="#">骨鱼</a></td>
											<td>$40</td>
											<td class="hidden-480">3,100</td>
											<td>Feb 17</td>

											<td class="hidden-480"><span
												class="label label-sm label-success">Registered</span></td>
											<td>思思</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>20</td>
											<td>020</td>
											<td><a href="#">银鱼</a></td>
											<td>$58</td>
											<td class="hidden-480">6,100</td>
											<td>Feb 19</td>

											<td class="hidden-480"><span
												class="label label-sm label-inverse arrowed-in">Flagged</span>
											</td>
											<td>思思</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>21</td>
											<td>021</td>
											<td><a href="#">泥蚶</a></td>
											<td>$50</td>
											<td class="hidden-480">4,400</td>
											<td>Apr 01</td>

											<td class="hidden-480"><span
												class="label label-sm label-warning">Expiring</span></td>
											<td>敏子</td>
										</tr>

										<tr>
											<td class="center"><label class="pos-rel"> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></td>

											<td>22</td>
											<td>022</td>
											<td><a href="#">泥鳅</a></td>
											<td>$20</td>
											<td class="hidden-480">1,400</td>
											<td>Apr 04</td>

											<td class="hidden-480"><span
												class="label label-sm label-info arrowed arrowed-righ">Sold</span>
											</td>
											<td>思思</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>

					<div id="modal-table" class="modal fade" tabindex="-1">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header no-padding">
									<div class="table-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">
											<span class="white">&times;</span>
										</button>
										Results for "Latest Registered Domains
									</div>
								</div>

								<div class="modal-body no-padding">
									<table
										class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
										<thead>
											<tr>
												<th>Domain</th>
												<th>金额</th>
												<th>数量</th>

												<th><i class="ace-icon fa fa-clock-o bigger-110"></i>
													结束日期</th>
											</tr>
										</thead>

										<tbody>
											<tr>
												<td><a href="#">ace.com</a></td>
												<td>$45</td>
												<td>3,330</td>
												<td>Feb 12</td>
											</tr>

											<tr>
												<td><a href="#">base.com</a></td>
												<td>$35</td>
												<td>2,595</td>
												<td>Feb 18</td>
											</tr>

											<tr>
												<td><a href="#">max.com</a></td>
												<td>$60</td>
												<td>4,400</td>
												<td>Mar 11</td>
											</tr>

											<tr>
												<td><a href="#">best.com</a></td>
												<td>$75</td>
												<td>6,500</td>
												<td>Apr 03</td>
											</tr>

											<tr>
												<td><a href="#">pro.com</a></td>
												<td>$55</td>
												<td>4,250</td>
												<td>Jan 21</td>
											</tr>
										</tbody>
									</table>
								</div>

								<div class="modal-footer no-margin-top">
									<button class="btn btn-sm btn-danger pull-left"
										data-dismiss="modal">
										<i class="ace-icon fa fa-times"></i> Close
									</button>

									<ul class="pagination pull-right no-margin">
										<li class="prev disabled"><a href="#"> <i
												class="ace-icon fa fa-angle-double-left"></i>
										</a></li>

										<li class="active"><a href="#">1</a></li>

										<li><a href="#">2</a></li>

										<li><a href="#">3</a></li>

										<li class="next"><a href="#"> <i
												class="ace-icon fa fa-angle-double-right"></i>
										</a></li>
									</ul>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>

					<!-- PAGE CONTENT ENDS -->

				</div>
				<!-- /.row -->
			</div>
			<!-- /.page-content -->

		</div>
		<!-- /.main-content -->



		<a href="#" id="btn-scroll-up"
			class="btn-scroll-up btn btn-sm btn-inverse"> <i
			class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script src="../js/jquery-2.1.4.min.js"></script>

	<!-- <![endif]-->

	<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
	<script type="text/javascript">
			if ('ontouchstart' in document.documentElement) document.write("<script src='../js/jquery.mobile.custom.min.js'>" +
				"<" + "/script>");
		</script>
	<script src="../js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/jquery.dataTables.bootstrap.min.js"></script>
	<script src="js/dataTables.buttons.min.js"></script>
	<script src="js/buttons.flash.min.js"></script>
	<script src="js/buttons.html5.min.js"></script>
	<script src="js/buttons.print.min.js"></script>
	<script src=".js/buttons.colVis.min.js"></script>
	<script src="js/dataTables.select.min.js"></script>

	<!-- ace scripts -->
	<script src="js/ace-elements.min.js"></script>
	<script src="js/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
			jQuery(function($) {
				//initiate dataTables plugin
				var myTable =
					$('#dynamic-table')
					//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
					.DataTable({
						bAutoWidth: false,
						"aoColumns": [{
								"bSortable": false
							},
							null, null, null, null, null,
							{
								"bSortable": false
							}
						],
						"aaSorting": [],


						//"bProcessing": true,
						//"bServerSide": true,
						//"sAjaxSource": "http://127.0.0.1/table.php"	,

						//,
						//"sScrollY": "200px",
						//"bPaginate": false,

						//"sScrollX": "100%",
						//"sScrollXInner": "120%",
						//"bScrollCollapse": true,
						//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
						//you may want to wrap the table inside a "div.dataTables_borderWrap" element

						//"iDisplayLength": 50


						select: {
							style: 'multi'
						}
					});



				$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

				new $.fn.dataTable.Buttons(myTable, {
					buttons: [{
							"extend": "colvis",
							"text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
							"className": "btn btn-white btn-primary btn-bold",
							columns: ':not(:first):not(:last)'
						},
						{
							"extend": "copy",
							"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
							"className": "btn btn-white btn-primary btn-bold"
						},
						{
							"extend": "csv",
							"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
							"className": "btn btn-white btn-primary btn-bold"
						},
						{
							"extend": "excel",
							"text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
							"className": "btn btn-white btn-primary btn-bold"
						},
						{
							"extend": "pdf",
							"text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
							"className": "btn btn-white btn-primary btn-bold"
						},
						{
							"extend": "print",
							"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
							"className": "btn btn-white btn-primary btn-bold",
							autoPrint: false,
							message: 'This print was produced using the Print button for DataTables'
						}
					]
				});
				myTable.buttons().container().appendTo($('.tableTools-container'));

				//style the message box
				var defaultCopyAction = myTable.button(1).action();
				myTable.button(1).action(function(e, dt, button, config) {
					defaultCopyAction(e, dt, button, config);
					$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
				});


				var defaultColvisAction = myTable.button(0).action();
				myTable.button(0).action(function(e, dt, button, config) {

					defaultColvisAction(e, dt, button, config);


					if ($('.dt-button-collection > .dropdown-menu').length == 0) {
						$('.dt-button-collection')
							.wrapInner(
								'<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
							.find('a').attr('href', '#').wrap("<li />")
					}
					$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
				});

				////

				setTimeout(function() {
					$($('.tableTools-container')).find('a.dt-button').each(function() {
						var div = $(this).find(' > div').first();
						if (div.length == 1) div.tooltip({
							container: 'body',
							title: div.parent().text()
						});
						else $(this).tooltip({
							container: 'body',
							title: $(this).text()
						});
					});
				}, 500);





				myTable.on('select', function(e, dt, type, index) {
					if (type === 'row') {
						$(myTable.row(index).node()).find('input:checkbox').prop('checked', true);
					}
				});
				myTable.on('deselect', function(e, dt, type, index) {
					if (type === 'row') {
						$(myTable.row(index).node()).find('input:checkbox').prop('checked', false);
					}
				});




				/////////////////////////////////
				//table checkboxes
				$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);

				//select/deselect all rows according to table header checkbox
				$('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]')
					.eq(0).on('click', function() {
						var th_checked = this.checked; //checkbox inside "TH" table header

						$('#dynamic-table').find('tbody > tr').each(function() {
							var row = this;
							if (th_checked) myTable.row(row).select();
							else myTable.row(row).deselect();
						});
					});

				//select/deselect a row when the checkbox is checked/unchecked
				$('#dynamic-table').on('click', 'td input[type=checkbox]', function() {
					var row = $(this).closest('tr').get(0);
					if (this.checked) myTable.row(row).deselect();
					else myTable.row(row).select();
				});



				$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
					e.stopImmediatePropagation();
					e.stopPropagation();
					e.preventDefault();
				});



				//And for the first simple table, which doesn't have TableTools or dataTables
				//select/deselect all rows according to table header checkbox
				var active_class = 'active';
				$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function() {
					var th_checked = this.checked; //checkbox inside "TH" table header

					$(this).closest('table').find('tbody > tr').each(function() {
						var row = this;
						if (th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0)
							.prop('checked', true);
						else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop(
							'checked', false);
					});
				});

				//select/deselect a row when the checkbox is checked/unchecked
				$('#simple-table').on('click', 'td input[type=checkbox]', function() {
					var $row = $(this).closest('tr');
					if ($row.is('.detail-row ')) return;
					if (this.checked) $row.addClass(active_class);
					else $row.removeClass(active_class);
				});



				/********************************/
				//add tooltip for small view action buttons in dropdown menu
				$('[data-rel="tooltip"]').tooltip({
					placement: tooltip_placement
				});

				//tooltip placement on right or left
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();

					var off2 = $source.offset();
					//var w2 = $source.width();

					if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
					return 'left';
				}




				/***************/
				$('.show-details-btn').on('click', function(e) {
					e.preventDefault();
					$(this).closest('tr').next().toggleClass('open');
					$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass(
						'fa-angle-double-up');
				});
				/***************/





				/**
				//add horizontal scrollbars to a simple table
				$('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
				  {
					horizontal: true,
					styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
					size: 2000,
					mouseWheelLock: true
				  }
				).css('padding-top', '12px');
				*/


			})
		</script>
</body>
</html>
